<template>
  <div class="dashboard-container" style="margin: 15px">
    <panel-group></panel-group>
    <el-card>
      <div class="amap-wrapper" id="ec2">
        <!-- <el-amap class="amap-box" :vid="'amap-vue'">
          <el-amap-marker v-for="(marker, index) in markers" :key="index" :position="marker.position" :events="marker.events" :visible="marker.visible" :draggable="marker.draggable" :vid="index"></el-amap-marker>
        </el-amap> -->
      </div>
    </el-card>
    <!-- <component :is="currentRole"></component> -->
    <!-- <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
// import request from '@/utils/request'
import { mapGetters } from 'vuex'
import adminDashboard from './admin'
import editorDashboard from './editor'
import PanelGroup from './admin/components/PanelGroup'
import request from '@/utils/request'

// 按需引入 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts')
// 引入柱状图
require('echarts/lib/chart/line')
require('echarts/lib/chart/bar')
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/toolbox')
require('echarts/lib/component/title')
export default {
  name: 'dashboard',
  components: { adminDashboard, editorDashboard, PanelGroup },
  data() {
    return {
      currentRole: 'adminDashboard'
      // dialogVisible: false,
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  mounted() {
    this.initCharts()
    // this.dialogVisible = true
    request.get('/sys/logs/lineData').then(res => {
      // 声明月份
      const xAxisData = new Array(12).fill(0)
      xAxisData.forEach((element, index) => {
        xAxisData[index] = index + 1
      })
      // 实际数据
      const seriesData = new Array(12).fill(0)
      res.content.forEach((element, index) => {
        // xAxisData[element.month - 1] = element.month
        seriesData[element.month - 1] = element.count
      })
      this.setOptions(xAxisData, seriesData)
    })
  },
  methods: {
    initCharts() {
      this.chart = echarts.init(document.getElementById('ec2'))
    },
    setOptions(xAxisData, seriesData) {
      this.chart.setOption({
        title: {
          left: 'center',
          text: '系统使用情况统计'
        },
        tooltip: {
          trigger: 'axis'
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        xAxis: {
          name: '月份',
          data: xAxisData,
          type: 'category',
          boundaryGap: false,
          axisPointer: {
            label: {
              formatter: function(params) {
                return params.value + '月份'
              }
            }
          }
        },
        yAxis: {},
        series: [{
          name: '活跃度',
          type: 'line',
          data: seriesData
        }]
      })
    }
  }
}
</script>
<style>
.amap-wrapper {
  height: 600px;
}
.el-card {
  margin: 0
}
</style>